
  
<gm:page title="My App" onload="drawTable()"   authenticate="true">

  
<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["piechart", "table", "barchart"]});
      google.setOnLoadCallback(drawChart); // Set callback to run when API is loaded
      google.setOnLoadCallback(drawTable); // Set callback to run when API is loaded
      google.setOnLoadCallback(drawBarChart); // Set callback to run when API is loaded
      google.setOnLoadCallback(chargerDonnees); // Set callback to run when API is loaded
      google.setOnLoadCallback(fixerLabel); // Set callback to run when API is loaded
 
 
      var data;
      var table;
      var barChart;
      var chart;
      var saisie;
      var saisie2;
      
function getSaisie(){
      saisie;
}
      
function getSaisie2(){
      saisie2;
}
     
function chargerDonnees() {
        data = new google.visualization.DataTable();
        data.addColumn('string', '');
        data.addColumn('number', '');
        table = new google.visualization.Table(document.getElementById('table_div'));
        chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        barChart = new google.visualization.BarChart(document.getElementById('barChart_div'));
        }
      
  function fixerLabel(){
       saisie = prompt("Colonne qualitative :", "Tapez votre texte");
       if (saisie!=null) {
          data.setColumnLabel(0, saisie);}
       saisie2= prompt("Colonne quantitative :", "Tapez votre texte");
       if (saisie!=null) {
          data.setColumnLabel(1, saisie2);}
      drawTable();
  }
  
  function recupererDonnees(){
      var index=data.addRow();
      var value0=document.remplissage.activite.value;
      var value1=document.remplissage.duree.value;
      data.setValue(index, 0, value0);
      data.setValue(index, 1, parseFloat(value1));
      drawTable();
  }
      
  function supprimerLigne(){
      var ligne=document.modif.suppression.value;
      data.removeRow(parseInt(ligne)-1);
      drawTable();
  }
      
  function modifierLigne(){
      var numero=document.modif.modifLigne.value;
      var valeur=document.modif.modifValeur.value;
      data.setValue(parseInt(numero)-1, 1, parseFloat(valeur));
      drawTable();
  }
  
  
  function drawTable(){
    table.draw(data, {width: 400, height: 240, showRowNumber: true, title: 'Mes Activites'});

    document.getElementById('div').style.visibility="visible";
    document.getElementById('barChart_div').style.visibility="hidden";
    document.getElementById('chart_div').style.visibility="hidden";
  }
      
   function drawChart(){
        document.getElementById('chart_div').style.visibility="visible";
        document.getElementById('barChart_div').style.visibility="hidden";
        document.getElementById('div').style.visibility="hidden";
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Mes Activites'});
   }
      
   function drawBarChart(){
      document.getElementById('barChart_div').style.visibility="visible";
      document.getElementById('chart_div').style.visibility="hidden";
      document.getElementById('div').style.visibility="hidden"; 
      barChart.draw(data, {width: 400, height: 240, is3D: true, title: 'Mes Activites'}); 
   }
    
    </script>
      
  </head>

  <body>
      
    <gm:data id="MesData" data="http://pipes.yahoo.com/pipes/pipe.run?_id=uKAc9NpU3RGrcgG5JhOy0Q&_render=rss"/>  
      

          
      <form > 
      | <input type="radio" name="Tableau" value="Table" onFocus='drawTable()' checked="true"   /> Tableau  
      | <input type="radio" name="Tableau" value="BarChart" onFocus='drawBarChart()' /> Histogramme 
      | <input type="radio" name="Tableau" value="PieChart" onFocus='drawChart()' /> Camembert 
      | </form>
      
      <form name="remplissage" style=" position:absolute; left:11px; top:400px" >
       <p><b> Ajouter une ligne: </b> <br/> <br/> 
         <table>
           <tr>       
             <td><label for="activite"> getSaisie() : </label></td>
             <td><input type="text" name="activite" id="activite" size='5' /></td>
             <td rowspan='2'><input type="button" value="OK" onClick="recupererDonnees()"/></td> 
           </tr><tr>          
             <td><label for="duree">getSaisie2() : </label></td>
             <td><input type="text" name="duree" id="duree" size='5'/></td> 
           </tr></table> 
       </p> 
     </form>
    
     <form name="modif" style=" position:absolute; left:500px; top:400px" >
       <p>   <b>Modification</b>  <br/> <br/>
         <table>
           <tr> 
             <td><label for="suppression">Supprimer ligne: </label></td> 
             <td><input type="text" name="suppression" id="suppression"   size='5' /></td>
             <td><input type="button" value="supprimer"  onClick="supprimerLigne()" /></td>     
           </tr><tr> 
             <td ><label for="modifLigne">Modifier ligne: </label></td>
             <td><input type="text" name="modifLigne" id="modifLigne"  size='5'  /></td> 
             <td rowspan='2'><input type="button" value=" modifier " onClick="modifierLigne()" /></td> 
           </tr><tr>  
             <td><label for="modifValeur"> avec la valeur </label></td>
             <td><input type="text" name="modifValeur" id="modifValeur" size='5' /></td> 
           </tr>
         </table>          
      </p> 
     </form>
    
     <div id="boutons" style=" position:absolute; left:500px; top:90px">
      <table>  
      <tr><td><input type="button" value="nbreLigne" onClick="alert('Nombre de Ligne: '+data.getNumberOfRows());" /></td></tr>
      <tr><td><input type="button" value="Imprimer" onClick="window.print();" /></td></tr> 
      </table> 
     </div> 

    
     <div id="div" style=" position:absolute; height:60px; left:11px; top:90px" >
     <div id="table_div" ></div> 
      
     </div>
     <div id="chart_div" style=" position:absolute; left:11px; top:90px "></div>
     <div id="barChart_div" style=" position:absolute;left:11px; top:90px "></div>
  

    
    <gm:list id="news" style="position:absolute; left:11px; top:600px" template="myListTemplate1" data="http://pipes.yahoo.com/pipes/pipe.run?_id=uKAc9NpU3RGrcgG5JhOy0Q&_render=rss" pagesize="10"/>   
 
   <gm:template id="myListTemplate1">
    <table class="blue-theme" style="width:100%" border="0.1px" >
          <tr repeat="true"> 
          <td style="padding-bottom:10px" > 
            <b>   
            <gm:text ref="atom:title" style="font-color:black" />  
            </b> 
          </td>
          <td  style="padding-bottom:10px" > 
            <br/>
            <gm:html ref="atom:summary"/>  <br/>
            <br/> 
          </td>
          </tr> 
    </table>
  </gm:template>
  
  </body>
</html>    
      

</gm:page>